JS101 隨筆

#js

Posted by MoreCoke on 2020-06-19

前言

簡單紀錄我在這堂課學到甚麼東西,大部分的內容都能往下挖講更深,但我現在的目標是搞懂基礎並能夠運用,所以就不會講太多關於底層的觀念,哪天心血來潮再獨立個主題來寫。

&& || 的短路性質

&&(且)

簡單定義 : 必須左右兩側都是 true,才會回傳 true 。

console.log( true && true); // true

在 JS 中這些非布林值的資料(物件、陣列、數字、字串),在放入判斷式比較時會自動幫你轉成布林值,如果想看值轉 boolean 是 true 還是 false 可以用 JS 內建的 Boolean() 去檢查。下方的 truly 和 falsely 就是說資料的布林值是透過轉型得到的,而非 primitive type (純值) 中的 true 和 false。

如果左側的值轉 boolean 是 truly 的話,不管右側為 truly 還是 falsey , 會回傳右側的值

console.log(3 && 0); // 0

看結果有點難懂,可以想成 && 在背後有偷偷用 Boolean() 轉型。

console.log(3 && 0); // 0
---
3 && 0 // 我們看到的
true && false // JS 在背後做的

如果左側的值轉 boolean 是 falsely 的話會回傳左側的值,不會管右邊的值

console.log(0 && 10); // 0

所以 && 在做的事情就是看左側的值,如果是 falsely,直接回傳左側的結果;是 truly 的話就回傳右側的結果。

||(或)

簡單定義 : 左右側兩側只要有個是 true,就會回傳 true。

console.log( false || true); // true

如果左側的值轉 boolean 是 truly 的話,直接回傳左側的值,不會管右邊的值

console.log(3 || 0); // 3

如果左側的值轉 boolean 是 falsely 的話會回傳右側的值

console.log(0 || 10); // 10

|| 在做的事情一樣先看左側的值,如果是 falsely,直接回傳右側的結果;是 truly 的話就回傳左側的結果。

仔細看的話 && 和 || 在背後運作的原理滿像的,都是先看左側的值,再決定要不要繼續看右邊的值。

短路性質就是在說程式只執行左側沒跑右側的情況。

0 && console.log('hi') // 0

先做再說:do...while...

主要是 chrome 的 debug 教學,忘記能回去看。

從 Object 的等號真正的理解變數

使用 function 時的注意事項

關於 JS 是傳值(pass by value)還是傳參考(pass by reference)每個人都講的不一樣,還有聽過 pass by sharing 這樣的概念,就用例題解釋這個現象吧,這樣最快。

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num); // 10
console.log(obj1.item); // "changed"
console.log(obj2.item); // "unchanged"

function 的參數會再複製一份參考,參數 a 和參數 c 的觀念差不多,這邊就只說參數 a ,參數 a 複製了 num = 10 的參考,只是最後用 a = a * 10重新賦值改變了參數 a 的參考,所以最後才不會改到 num 的值;而參數 b 因為 b.item = "changed"; 直接改到參考的內容,所以最後變異(mutable)了物件內 item 的值。

等號的話可以想成是重新賦值,直接指派一個新的參考給變數,自然不會動到原本指向參考的內容。

參考資料:
Is JavaScript a pass-by-reference or pass-by-value language?
重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」?

引數(Argument)與參數(Parameter)

function sayhi(name) {
  console.log('hi, ', name);
}
sayhi('MoreCoke'); // 'hi, MoreCoke'

參數就是 function 中的 name,參數是用來告訴使用者這個 function 可以塞甚麼東西。
引數就是使用者自己塞進去的東西('MoreCoke')。

return 不 return,有差嗎?

在使用 google 開發者檢查工具常搞不懂為什麼會有 undefined。
在 function 能看到 :


在 宣告變數也能看到 :

現在才知道如果沒有 return 值的話,預設會回傳 undefined。

如果會回傳東西,自然就是印出回傳值了。


#js







Related Posts

[ 筆記 ] 後端基礎 - PHP

[ 筆記 ] 後端基礎 - PHP

What Type of Laser Engraving Machine Should be Used for Stainless Steel Engraving?

What Type of Laser Engraving Machine Should be Used for Stainless Steel Engraving?

Android Menu 實作踩坑紀錄

Android Menu 實作踩坑紀錄


Comments